<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8" />
    <title>Image Editor</title>
    <link type="text/css" href="css/tui-color-picker.css" rel="stylesheet" />
    <link type="text/css" href="css/tui-image-editor.css" rel="stylesheet" />
    <style>
      @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="tui-image-editor-container"></div>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/fabric.js"></script>
    <script type="text/javascript" src="js/tui-code-snippet.min.js"></script>
    <script type="text/javascript" src="js/tui-color-picker.js"></script>
    <script type="text/javascript" src="js/FileSaver.min.js"></script>
    <script type="text/javascript" src="js/tui-image-editor.js"></script>
    <script type="text/javascript" src="js/theme/custom-theme.js"></script>
    <script type="text/javascript" src="js/lang/zh-CN.js"></script>
    <script>
        // Image editor
        var imageEditor;
        $(function(){
            initImageEditor();

            window.onresize = function () {
                if (imageEditor){
                    imageEditor.ui.resizeEditor();
                }
            };
        }) 
        function initImageEditor(){
            imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
                includeUI: {
                    initMenu: "filter", // 默认打开的菜单项
                    menuBarPosition: "bottom", // 菜单所在的位置
                    locale: locale_zh,// 本地化语言为中文
                    theme: customTheme // customTheme or blackTheme or whiteTheme
                },
                cssMaxWidth: 700,
                cssMaxHeight: 500,
                usageStatistics: false,
            });
        }
    </script>
  </body>
</html>
